<template>
	<view class="bg-white">
		<mescroll-body ref="mescrollRef" :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="bg position-relative"  :style="{ background: 'url('+$_BASE_IMG_API+'/images/integralbg.png)  no-repeat','background-size': '100% 100%'}">
				<view class="position-relative flex flex-column align-center u-p-t-30">
				<text class="u-p-t-30 u-font-30" style="color:#f3e9db">可用记账点</text>
					<text class="u-p-t-30 font-weight-bold u-font-40 text-white">{{thousandsSeparator(userInfo.credit4) || '0.00'}}</text>
				</view>
				<view class="flex align-center font-30 font-weight-bold position-absolute" style="color:#ffffff;right:30rpx;top:130rpx;" @click="transferShow=true">
					<image style="display:block; margin: 0 auto; width: 36rpx; height: 36rpx;" src="/static/mine/share.png"></image>
					<view class="u-m-l-10">转赠</view>
				</view>
			</view>
			<view class="u-m-t-40 u-m-l-30 font-32 font-weight-bold" style="color:#333333">
				记账点明细
			</view>
			<view class="u-m-t-20 rounded-10"  v-if="infoList.length>0">
				<view class="u-p-x-30 u-p-y-20 bg-white" >
					<block v-for="(item,index) in infoList" :key="index">
						<view class="flex align-center justify-between u-p-y-20 u-border-bottom">
							<view class="flex flex-column" style="width: 80%;">
								<text>{{item.remark}}</text>
								<text class="text-greey u-p-t-20">{{item.createtime}}</text>
							</view>
							<text>{{item.num}}</text>
						</view>
					</block>
				</view>
			</view>
		</mescroll-body>
		<u-popup v-model="transferShow" mode="bottom" :safe-area-inset-bottom="true" :closeable="true" border-radius="30">
			<view class="font-32 font-weight-bold u-m-t-50 text-center" style="color:#333333">记账点转赠</view>
			<view class="u-m-l-30 u-m-y-30 font-28 font-weight-bold">转赠用户</view>
			<u-tabs :list="list" active-color="var(--mainColor)" :is-scroll="false" :current="type" @change="change"></u-tabs>
			<view class="u-p-x-30 u-m-t-30">
				<u-input v-model="field_value" :custom-style="{ 'background-color': '#FAFAFA', 'padding-left': '20rpx' }" :placeholder="type==0?'请输入用户昵称':'请输入手机号码'"></u-input>
				<u-input class="u-m-t-30" v-model="money" :custom-style="{ 'background-color': '#FAFAFA', 'padding-left': '20rpx' }" placeholder="请输入转赠数额"></u-input>
			</view>
			<u-button hover-class="none" shape="circle" :custom-style="{ 'background-color': '#FE572A', 'margin': '40rpx 30rpx', 'color': '#fff' }" @click="transferSend">转赠</u-button>
		</u-popup>
		<u-popup v-model="successShow" mode="center" border-radius="30">
			<view class="u-p-x-30 u-p-y-50"  style="width:600rpx">
				<image style="display:block; margin: 0 auto; width: 80rpx; height: 80rpx;" src="../static/mine/entry-suc.png"></image>
				<view class="font-32 font-weight-bold text-center u-m-t-30" style="color:#333333">转赠成功！</view>
				<u-button hover-class="none" shape="circle" :custom-style="{ 'background-color': '#FE572A', 'color': '#fff', 'margin-top': '80rpx'}" @click="successShow=false">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { MineCenterApi } from '@/api/serves.js'
	import {
		thousandsSeparator
	} from "@/common/utils/utils.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				thousandsSeparator,
				infoList: [],
				list: [{
					name: '用户昵称'
				}, {
					name: '手机号码'
				}],
				transferShow:false,
				successShow:false,
				field_value:"",
				money:"",
				type: 0
			}
		},
		onLoad() {

		},
		onShow(){
			this.$store.dispatch('user/getUserInfo')
		},
		methods: {
			change(index) {
				this.type = index;
			},
			// 下拉刷新回掉
			downCallback() {
				this.mescroll.resetUpScroll() 
			},
			// 上拉加载
			upCallback(page) {
				MineCenterApi.Ccdetails({type: 4, page: page.num}).then(res=> {
					console.log('积分明细', res);
					if(res.code == 1){
						let result = res.data
						if(page.num == 1) this.infoList = []; //如果是第一页需手动制空列表
						this.infoList = this.infoList.concat(result); //追加新数据
						setTimeout(()=>{
							this.mescroll.endByPage(result.length, result.totalpage)
							uni.hideLoading();
						},20)
					}else {
						this.$Toast(res.msg)
						this.mescroll.endErr()
					}
				})
			},
			// 转换申请
			transferSend(){
				if(!this.field_value) return this.$Toast(this.type==0?'请输入用户昵称':'请输入手机号码')
				if(!this.money) return this.$Toast('请输入转赠数额')
				MineCenterApi.transferSend({type: this.type + 1, field_value: this.field_value, money: this.money }).then(res=> {
					if(res.code == 1){
						this.transferShow = false
						this.successShow = true
						this.$store.dispatch('user/getUserInfo')
					}else {
						this.$Toast(res.msg)
						this.mescroll.endErr()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	width: 750rpx;
	height: 250rpx;
}
</style>
